<template>
  <image :src="currentSrc" :mode="mode" :lazy-load="true" @error="imageLoadError"></image>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
  image {
    width: 100%;
    height: 100%;
  }
</style>

<script type="text/babel">

  export default {
    name: "ImageBox",
    props: {
      src: {
        type: String,
      },
      mode: {
        type: String,
        default: 'aspectFill'
      },
      defaultImgType: {
        type: Number,
        default: 1,     //  1 小房子 2 彩色logo  3 山西万民logo  4 养和堂logo
      }
    },
    components: {},
    data() {
      return {
        currentSrc: ''
      }
    },
    computed: {},
    watch: {
      src (newVal) {
        this.currentSrc = newVal
        if(this.currentSrc == ''){
          this.imageLoadError()
        }
      }
    },
    methods: {
      imageLoadError (e) {
        if (this.defaultImgType == 1) {
          this.currentSrc = require('../../assets/images/default/default.png')
        } else if(this.defaultImgType ==2){
          this.currentSrc = require('../../assets/images/default/loading_logo.jpeg')
        } else if(this.defaultImgType ==3){
          this.currentSrc = require('../../assets/images/common/wanmin/loading_logo_sx.jpg')
        } else if(this.defaultImgType ==4){
          this.currentSrc = require('../../assets/images/common/yanghetang/loading_logo.jpg')
       }
      }
    },
    mounted() {
      this.currentSrc = this.src
      if(this.currentSrc == ''){
          this.imageLoadError()
        }
    },
  }
</script>

